<template>
    <div class="nav-card">
        <div class="nav" v-for="item in navList" :key="item.text" :class="{
            'nav-active': item.path === $route.path
        }"><span class="item-name">{{ item.text }}</span></div>
    </div>
</template>
<script>

export default {
    name: 'NavCard',
    data() {
        return {
            navList: [
                {
                    icon: '',
                    path: '/data-warehouse',
                    text: '数据汇总'
                },
                {
                    icon: '',
                    path: '',
                    text: '医院机构列表'
                },
                {
                    icon: '',
                    path: '',
                    text: '医务人员资质'
                },
                {
                    icon: '',
                    path: '',
                    text: '护士人员资质'
                },
                {
                    icon: '',
                    path: '',
                    text: '就诊列表'
                },
                {
                    icon: '',
                    path: '',
                    text: '处方列表'
                },
                {
                    icon: '',
                    path: '',
                    text: '药品成分库'
                },
                {
                    icon: '',
                    path: '',
                    text: '预警项'
                }
            ]
        }
    }
}
</script>
<style scoped lang="scss">
.nav-card {
    margin-top: 17px;
    display: flex;
    padding: 10px 14px;
    background-color: #fff;

    .nav {
        padding: 20px 44px 18px 44px;
        width: 184px;
        height: 54px;
        background-color: #EBEFF8;
        border-radius: 5px;
        margin-right: 8px;
        cursor: pointer;
        user-select: none;

        .item-name {
            font-size: 16px;
            color: #2B2B2B;
            font-weight: 500;
            white-space: nowrap;
            line-height: 16px;
        }

        .nav--active {
            background-color: #4373F1;

            .item-name {
                color: #fff;
            }
        }
    }

    .nav-active {
        background-color: #4373F1;

        .item-name {
            color: #FFFFFF;
        }
    }
}
</style>
